<template>
  <div class="content">
    <div>
      <!-- 路由跳转 -->
      <el-row :style="{border:'none'}">
        <router-link :to="{name:'gatt'}">
          <el-button class="nav_but">出口订单</el-button>
        </router-link>
        <router-link :to="{name:'area'}">
          <el-button class="nav_but">辖区企业</el-button>
        </router-link>
        <router-link :to="{name:'trace'}">
          <el-button class="nav_but">贸易地区</el-button>
        </router-link>
        <router-link :to="{name:'trade'}">
          <el-button class="nav_but">涉美跟踪</el-button>
        </router-link>
      </el-row>
    </div>
    <!-- 表格内容 -->
    <div
      :style="{marginTop:'30px',border:'1px solid #ebeef5',borderRadius:'10px',background:'rgba(213, 224, 225,1)'}"
    >
      <div class="ent_rank" style="margin-top:0;">
        <div :style="{borderRadius:'10px',flex:'1'}">
          <span
            style="color:rgb(51, 81, 146);margin-bottom:20px;font-weight:600;line-height: 40px;text-indent: 20px;font-size: 18px;"
          >最新数据</span>
          <div class="fleft top_order">
            <p class="order_p">
              激活企业总数&nbsp;&nbsp;
              <span class="order_num">135,351</span> 家
            </p>
          </div>
          <div class="fleft top_order">
            <p class="order_p" style="margin-left:-20px;">
              申报企业总数&nbsp;&nbsp;
              <span class="order_num">35,354</span> 家
            </p>
          </div>
          <div class="fleft top_order">
            <p class="order_p">
              在手订单总数&nbsp;&nbsp;
              <span class="order_num">125,513</span> 笔
            </p>
          </div>
          <div class="fleft top_order">
            <p class="order_p">
              在手订单总金额&nbsp;&nbsp;
              <span class="order_num">153,546</span> 万美元
            </p>
          </div>
          <div class="fleft top_order">
            <p class="order_p">
              出货订单总数&nbsp;&nbsp;
              <span class="order_num">125,513</span> 笔
            </p>
          </div>
          <div class="fleft top_order">
            <p class="order_p">
              出货订单总金额&nbsp;&nbsp;
              <span class="order_num">153,546</span> 万美元
            </p>
          </div>
        </div>
      </div>
      <el-row v-if="involveList.length>0" style="margin-top:20px;">
        <el-col :span="8">
          <div style="color:#409eff;">
            <h4>
              涉美企业总数
              <span
                style="color:#e6a23c;display: inline-block;font-size: 22px;font-weight: bold;"
              >&nbsp;123556&nbsp;</span>
              家
            </h4>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="color:#409eff;">
            <h4>
              涉美订单总数
              <span
                style="color:#e6a23c;display: inline-block;font-size: 22px;font-weight: bold;"
              >&nbsp;123556&nbsp;</span>
              笔
            </h4>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="color:#409eff;">
            <h4>
              涉美企业总金额
              <span
                style="color:#e6a23c;display: inline-block;font-size: 22px;font-weight: bold;"
              >&nbsp;123556&nbsp;</span>
              万金额
            </h4>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="ent_rank">
      <div :style="{background:'#d5e0e1',borderRadius:'10px',flex:'1',marginRight:'10px',}">
        <span style="color:#303133;font-weight:600;text-indent: 20px;line-height: 40px;">企业在手订单总排行</span>
        <div class="right_hand">
          <div style="text-indent: 20px;">
            <p style="margin:0;font-weight:bold;">企业名称</p>
            <p v-for="(list,i) in inhandList.slice(0,5)" :key="i">{{list.companyName}}</p>
          </div>
          <div style="margin-left:20px;">
            <p style="margin:0;font-weight:bold;">在手订单总数</p>
            <p v-for="(list,i) in inhandList.slice(0,5)" :key="i">{{list.orderNum}}</p>
          </div>
        </div>
      </div>
      <div :style="{background:'#d5e0e1',borderRadius:'10px',flex:'1',marginLeft:'10px',}">
        <span style="color:#303133;font-weight:600;text-indent: 20px;line-height: 40px;">企业出货订单总金额排行</span>
        <div class="right_hand">
          <div style="margin-left:20px;">
            <p style="margin:0;font-weight:bold;">企业名称</p>
            <p v-for="(list,i) in outputList.slice(0,5)" :key="i">{{list.companyName}}</p>
          </div>
          <div style="margin-left:20px;">
            <p style="margin:0;font-weight:bold;">在手订单总数</p>
            <p v-for="(list,i) in outputList.slice(0,5)" :key="i">{{list.orderNum}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getData,
  getDataInvolve,
  getDataInhand,
  getDataOutput
} from "@/api/analysis";

export default {
  name: "Analysis",
  data() {
    return {
      dataList: [],
      involveList: [],
      inhandList: [],
      outputList: []
    };
  },
  mounted() {
    this.getDataList();
    this.getDataInvolveList();
    this.getDataInhandList();
    this.getDataOutputList();
  },
  methods: {
    getDataList() {
      getData().then(res => {
        if (res.code == 0) {
          this.dataList = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    getDataInvolveList() {
      getDataInvolve().then(res => {
        if (res.code == 0) {
          this.involveList = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    getDataInhandList() {
      getDataInvolve().then(res => {
        if (res.code == 0) {
          this.inhandList = res.data;
        } else {
          this.$notify.error(res.msg);
        }
      });
    },
    getDataOutputList() {
      getDataOutput().then(res => {
        if (res.code == 0) {
          this.outputList = res.data;
          console.log(this.outputList);
        } else {
          this.$notify.error(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  /*width: 80%;*/
  margin: auto;
  padding: 20px;
  .nav_but {
    // width: 200px;
    height: 130px;
    font-size: 25px;
    background-color: #c4d2e0;
    // margin-right: 8%;
    width: calc(25% - 0px);
    // color: #409eff;
  }
  .ent_rank {
    width: 100%;
    display: flex;
    margin-top: 30px;
    align-items: center;
    justify-content: space-around;
    span {
      display: block;
      padding: 5px;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
      //   font-weight: 600;
      //   color: #606266;
      color: #333;
    }
    .top_order {
      width: 50%;
      font-size: 20px;
      font-weight: bold;
      margin-top: 10px;
      .order_p {
        text-align: center;
        color: rgb(51, 81, 146);
        margin: 0;
        .order_num {
          color: #f56c6c;
          font-size: 22px;
          font-weight: bold;
          display: inline-block;
          width: 110px;
          border: none;
        }
      }
    }
    .right_hand {
      div {
        float: left;
        font-size: 13px;
        font-weight: 600;
        padding: 10px;
        p {
          color: #55575a;
          height: 22px;
          line-height: 22px;
        }
      }
    }
  }
  .el-row {
    border-top: 1px solid #ebeef5;
    text-align: center;
  }
}

@import "@/styles/common.scss";
</style>

